<template>
  <div class="show-main">
    <el-scrollbar style="height:100%">
      <el-form :inline="true" class="demo-form-inline" size="small">
        <el-form-item>
          <el-button type="primary" @click.stop="reload">刷新</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="table" border size="small">
        <el-table-column label="配送时长(分钟)" prop="delivery_time"></el-table-column>
        <el-table-column label="骑手自动派单时间(分钟)" prop="send_delaytime"></el-table-column>
        <el-table-column label="操作" width="50" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="edit(scope.row.id)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="编辑配置" :visible.sync="editVisible" width="500px" :before-close="handleClose('editForm')">
        <el-form ref="editForm" :model="editForm" label-width="80px" size="small" :rules="rules">
          <el-form-item label="配送时长(分钟)" prop="delivery_time">
            <el-input v-model="editForm.delivery_time"></el-input>
          </el-form-item>
          <el-form-item label="骑手自动派单时间(分钟)" prop="send_delaytime">
            <el-input v-model="editForm.send_delaytime"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('editVisible', 'editForm')" size="small">取 消</el-button>
          <el-button type="primary" @click="send('editVisible','editForm')" size="small">确 定</el-button>
        </span>
      </el-dialog>
    </el-scrollbar>
  </div>
</template>
<script>
import { operategetConf, operateEditConf } from '@/network/api.js'

export default {
  name: 'operateconf',
  data () {
    return {
      table: [],
      editForm: {
        id: 0,
        delivery_time: '', // 配送时长(分钟)
        send_delaytime: '' // 骑手自动派单时间(分钟)
      }, // 编辑的表单
      editVisible: false, // 编辑表单
      rules: {
        delivery_time: [
          { required: true, message: '请输入配送时长', trigger: 'blur' }
        ],
        send_delaytime: [
          { required: true, message: '请输入骑手自动派单时间', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.search()
  },
  computed: {
  },
  methods: {
    reload () {
      location.reload()
    },
    async search () {
      try {
        const rtn = await operategetConf({})
        this.table = [rtn.data]
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 编辑管理员
    async edit (id) {
      this.editVisible = true
      this.$nextTick(() => {
        this.editForm = { ...this.table[0] }
      })
    },
    // 关闭弹出前操作(不包括取消按钮)
    handleClose (formName) {
      return (done) => {
        this.$refs[formName].resetFields()
        done()
      }
    },
    // 取消按钮
    close (visibleName, formName) {
      this.$refs[formName].resetFields()
      this[visibleName] = false
    },
    send (visibleName, formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          switch (formName) {
            case 'editForm': // 编辑表单
              try {
                await operateEditConf(this.editForm)
                this.close('editVisible', 'editForm')
                this.search()
              } catch (e) {
                this.$message.error(e.message)
              }
              break
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
